// webpack 是 node 写出来的 node 的写法

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,
        contentBase: './build',
        open: true, // 自动打开浏览器
        compress: true, // gzip 压缩
    },
    mode: 'development',// 模式 默认两种 production development
    entry: './src/index.js',//  入口
    output: {
        filename: 'bundle.[hash:8].js', // 打包后文件名 加 hash 防止缓存
        path: path.resolve(__dirname, 'build'), // 路径必须是一个绝对路径
    },
    plugins: [ // 数组 防止所有 webpack 插件
        new HtmlWebpackPlugin({
            template: "./src/index.html", // 模版文件位置
            filename: "index.html", // 打包后的名字
            minify: { // 压缩 index.html
                removeAttributeQuotes: true, // 删除属性的双引号
                // collapseWhitespace: true, // 删除空格 压缩为一行
            },
            hash: true, // 加上 hash 串 防止系统缓存引起的 页面不更新
        })
    ],
    module: { // 模块
        rules: [ // 规则
            // css-loader 解析 @import 这种语法 解析路径
            // style-loader 把 css 插入到 head 标签中
            // loader 特点 功能单一
            // loader 的用法 字符串  只用一个 loader
            // 多个 loader 需要 []
            // loader 顺序 默认是从右向左，从下至上执行
            // loader 还可以写成对象模式  {loader: 'css-loader', options: {...}}
            {
                test: /\.css$/, use: [
                    {
                        loader: 'style-loader',
                        options: {
                            insertAt:'top', // 让模版中的 style 优先级更高，将生成的 style 放在上面
                        }
                    },
                    'css-loader'
                ]
            },
            {
                // 可以处理 less sass stylus node-sass sass-loader
                // stylus stylus-loader
                test: /\.less$/, use: [
                    {
                        loader: 'style-loader',
                        options: {
                            insertAt:'top', // 让模版中的 style 优先级更高，将生成的 style 放在上面
                        }
                    },
                    'css-loader', // @import 解析路径
                    'less-loader', // 把 less -》 css
                ]
            }
        ]
    }
};